<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置字符编码为UTF-8，确保页面能正确显示各种字符 -->
    <meta charset="UTF-8">
    <!-- 设置视口，使页面在不同设备上能自适应显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面标题 -->
    <title>自定义指令</title>
    <!-- 引入Vue.js库，用于实现Vue的功能 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 定义Vue实例的挂载点 -->
    <div id="app">
        <!-- 显示标题 -->
        <h1>自定义指令</h1>  
        <!-- 使用自定义指令v-red，该指令会将元素的文本颜色设置为红色 -->
        <div v-red>你好</div>
        <!-- 使用自定义指令v-color，将元素的文本颜色设置为data中a的值 -->
        <div v-color="a">你好</div>
        <!-- 提示文本 -->
        <p>自动获取焦点</p>
        <!-- 使用自定义指令v-focus，使输入框在插入到DOM后自动获取焦点 -->
        <input type="text" v-focus>

        <!-- 提示文本 -->
        <p>未使用自动获取焦点</p>
        <!-- 普通输入框，不会自动获取焦点 -->
        <input type="text" >

    <script type="text/javascript">
        // 全局注册自定义指令v-red
        // 当元素插入到DOM中时，会执行inserted钩子函数
        Vue.directive("red", {
            // inserted钩子函数，在元素被插入到父节点DOM中时调用
            inserted: function(el, binding){
                // 将元素的文本颜色设置为红色
                el.style.color = "red";
            }
        });

        // 全局注册自定义指令v-color1
        // 这是一个简写形式，相当于只定义了bind和update钩子函数
        Vue.directive("color1", function(el, binding){
            // 将元素的文本颜色设置为指令绑定的值
            el.style.color = binding.value;
        });

        // 创建Vue实例
        var vm = new Vue({
            // 指定Vue实例的挂载点
            el: "#app",
            // 定义Vue实例的数据
            data: {
                // 定义变量a，值为蓝色，用于v-color指令
                a:"blue"
            },
            // 局部注册自定义指令
            directives: {
                // 局部注册自定义指令v-color
                color: function(el, binding){
                    // 将元素的文本颜色设置为指令绑定的值
                    el.style.color = binding.value;
                },
                // 局部注册自定义指令v-focus
                focus: {
                    // inserted钩子函数，在元素被插入到父节点DOM中时调用
                    inserted: function(el){
                        // 让元素自动获取焦点
                        el.focus();
                    }
                }
            }
        });
    </script>
</body>
</html>